<template>
  <div>
    <router-view />

    <van-tabbar route active-color="#58C1D0" :z-index="200">
      <van-tabbar-item v-for="item in tabs" :key="item.name" :name="item.name" replace :to="item.path">
        <span> {{ t(item.lable) }}</span>
        <template #icon="props">
          <img :src="getAssetsImage(props.active, item.icon)" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
const { t } = useI18n()

const tabs = ref([
  { name: 'home', lable: 'toolbar.home', icon: 'home.png', path: '/home/home' },
  { name: 'order', lable: 'toolbar.order', icon: 'order.png', path: '/home/drink' },
  { name: 'store', lable: 'toolbar.store', icon: 'mall.png', path: '/home/product' },
  { name: 'tea', lable: 'toolbar.tea', icon: 'take.png', path: '/home/tea' },
  { name: 'my', lable: 'toolbar.my', icon: 'my.png', path: '/home/my' }
])

const getAssetsImage = (active: boolean, icon: string) => {
  const i = active ? icon.replace('.png', '_on.png') : icon
  return new URL(`../../assets/images/tab/${i}`, import.meta.url).href
}
</script>
